<template>
    <div class="address-item white-bg clearfix" @click="onClick">
        <div v-if="action" class="single-line-right action" @click.stop="onClickAction">
            <span class="btn btn-mobile btn-red-transparent btn-normal">{{action}}</span>
        </div>
        <div class="single-line-center-wrapper overflow">
            <div class="single-line-center-content" :class="{full: rightArrow}">
                <div class="name large-text font-bold">{{name}}  {{securityMobile}}</div>
                <div class="clearfix address-wrap">
                    <span class="single-line-left stamp-wrap">
                        <!-- <span v-if="tag" class="stamp blue-color blue-border">{{tag}}</span> -->
                        <span v-if="isDefault" class="stamp color-red red-border">默认</span>
                    </span>
                    <span v-if="rightArrow" class="single-line-right">
                        <span class="icon right-arrow">&#xe770;</span>
                    </span>
                    <div class="single-line-center-wrapper overflow address grey-color normal-text">
                        <div class="single-line-center-content">
                            {{address}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    repeat,
} from '@/lib/utils';

export default {
    name: 'AddressItem',
    props: {
        /** 右部按钮文本 */
        action: {
            type: String,
        },
        rightArrow: {
            type: Boolean,
            default: false,
        },
        name: {
            type: String,
        },
        mobile: {
            type: String,
        },
        tag: {
            type: String,
        },
        address: {
            type: String,
        },
        isDefault: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        securityMobile() {
            const mobile = this.mobile;
            return mobile ? mobile.substr(0, 3) + repeat('*', mobile.length - 7) + mobile.substr(-4) : '';
        },
    },
    methods: {
        onClick() {
            this.$emit('click');
        },
        onClickAction() {
            this.$emit('action');
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.address-item {
    position: relative;
    padding: 10rpx 30rpx;
    .stamp-wrap {
        line-height: @text-normal-line-height;
    }
    .stamp {
        display: inline-block;
        min-width: 34rpx;
        height: 34rpx;
        margin-right: 10rpx;
        padding: 0 6rpx;
        .text-small();
        border-radius: 4rpx;
        text-align: center;
    }
    .action {
        width: @button-normal-font-size * 2 + @button-normal-padding-h * 2;
        height: 1px;
    }
    .btn {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translate(0, -50%);
    }
    .right-arrow {
        font-size: 44rpx;
        color: #999;
    }
    .single-line-center-content.full {
        width: 100%;
    }
}
</style>
